<template>
  <div class="card">
    <div class="card-body">
      <h2 class="title">更换手机号</h2>
      
      <div class="form-group">
        <label for="userOldPhone">原手机号码</label>
        <input type="tel" id="userOldPhone" v-model="userOldPhone" placeholder="请输入当前绑定的手机号" required>
      </div>
      
      <div class="form-group">
        <label for="oldSmsCode">原手机验证码</label>
        <div class="verification-wrapper">
          <input type="text" id="oldSmsCode" v-model="oldSmsCode" class="sms-code-input" placeholder="6位验证码" maxlength="6" required>
          <button id="sendOldSmsBtn" class="send-sms-btn" type="button" @click="sendOldSmsCode" :disabled="oldSmsBtnDisabled">
            {{ oldSmsBtnText }}
          </button>
        </div>
      </div>
      
      <div class="form-group">
        <label for="userNewPhone">新手机号码</label>
        <input type="tel" id="userNewPhone" v-model="userNewPhone" placeholder="请输入新的手机号" required>
      </div>
      
      <div class="form-group">
        <label for="newSmsCode">新手机验证码</label>
        <div class="verification-wrapper">
          <input type="text" id="newSmsCode" v-model="newSmsCode" class="sms-code-input" placeholder="6位验证码" maxlength="6" required>
          <button id="sendNewSmsBtn" class="send-sms-btn" type="button" @click="sendNewSmsCode" :disabled="newSmsBtnDisabled">
            {{ newSmsBtnText }}
          </button>
        </div>
      </div>
      
      <button id="submitBtn" type="submit" @click="submitForm">确认更换</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserModifyPhone",
  components: {},
  data() {
    return {
      userOldPhone: '',
      oldSmsCode: '',
      userNewPhone: '',
      newSmsCode: '',
      oldSmsBtnDisabled: false,
      newSmsBtnDisabled: false,
      oldSmsBtnText: '获取验证码',
      newSmsBtnText: '获取验证码'
    }
  },
  methods: {
    sendSmsCode(type) {
      const phone = type === 'old' ? this.userOldPhone : this.userNewPhone;
      
      if (!/^1[3-9]\d{9}$/.test(phone)) {
        alert('请输入有效的手机号码');
        return;
      }
      
      if (type === 'old') {
        this.oldSmsBtnDisabled = true;
      } else {
        this.newSmsBtnDisabled = true;
      }
      
      // 模拟API请求
      setTimeout(() => {
        console.log(`发送验证码到: ${phone}`);
        
        // 倒计时效果
        let countdown = 60;
        const timer = setInterval(() => {
          if (type === 'old') {
            this.oldSmsBtnText = `${countdown}秒后重试`;
          } else {
            this.newSmsBtnText = `${countdown}秒后重试`;
          }
          
          if (--countdown <= 0) {
            clearInterval(timer);
            if (type === 'old') {
              this.oldSmsBtnDisabled = false;
              this.oldSmsBtnText = '获取验证码';
            } else {
              this.newSmsBtnDisabled = false;
              this.newSmsBtnText = '获取验证码';
            }
          }
        }, 1000);
      }, 500);
    },
    
    sendOldSmsCode() {
      this.sendSmsCode('old');
    },
    
    sendNewSmsCode() {
      this.sendSmsCode('new');
    },
    
    submitForm() {
      // 验证手机号格式
      if (!/^1[3-9]\d{9}$/.test(this.userOldPhone)) {
        alert('请输入有效的原手机号码');
        return;
      }
      
      if (!/^1[3-9]\d{9}$/.test(this.userNewPhone)) {
        alert('请输入有效的新手机号码');
        return;
      }
      
      if (this.userOldPhone === this.userNewPhone) {
        alert('新手机号不能与原手机号相同');
        return;
      }
      
      // 验证验证码格式
      if (!this.oldSmsCode || this.oldSmsCode.length !== 6) {
        alert('请输入6位原手机验证码');
        return;
      }
      
      if (!this.newSmsCode || this.newSmsCode.length !== 6) {
        alert('请输入6位新手机验证码');
        return;
      }
      
      let modifyUserPhoneInfo = { 
        userAccount: this.$store.state.user.userAccount,
        userOldPhone: this.userOldPhone, 
        oldSmsCode: this.oldSmsCode, 
        userNewPhone: this.userNewPhone, 
        newSmsCode: this.newSmsCode 
      }

      this.$api.serviceUser.post('api/user/modifyUserPhone', modifyUserPhoneInfo, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(response => {

        if (response.data.code == 200){
          this.$centerMessage({
            message: '修改用户绑定手机成功',
            type: 'success'
          });

          this.userOldPhone = ''
          this.oldSmsCode = ''
          this.userNewPhone = ''
          this.newSmsCode = ''
        }
        if (response.data.code == 40910){
          this.$centerMessage({
            message: response.data.message,
            type: 'error'
          });
        }
      })
      .catch(error => {
        console.log('失败', error);
      });
    }
  }
}
</script>

<style scoped>
.card {
  width: 100%;
  max-width: 380px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  animation: fadeIn 0.5s ease;
  margin-left: 50px;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  color: #666;
  font-size: 13px;
}

input {
  width: 96%;
  height: 38px;
  padding-left: 5px;
  padding-right: 5px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  border: 1px solid #d9d9d9;
  background-color: #f8f8f8;
}

input:focus {
  outline: none;
}

.verification-wrapper {
  display: flex;
  gap: 10px;
}

.sms-code-input {
  flex: 1;
}

.send-sms-btn {
  background: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0 15px;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
  height: 38px;
  font-size: 14px;
}

.send-sms-btn:hover {
  background: #ff7875;
}

.send-sms-btn:disabled {
  background: #e0e0e0;
  color: #999;
  cursor: not-allowed;
}

#submitBtn {
  width: 100px;
  background: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  margin: 20px auto 0;
  height: 38px;
  display: block;
}

#submitBtn:hover {
  background: #ff7875;
}

.title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>